<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeType">
        <a-tab-pane key="1" title="车辆基本信息" destroy-on-hide="true">
          <basicInfo :id="Number(route.params.id)" />
        </a-tab-pane>
        <a-tab-pane key="2" title="费用信息" v-if="status == 2" destroy-on-hide="true">
          <feeInfo :id="Number(route.params.id)" :supplierType="supplierType" />
        </a-tab-pane>
        <a-tab-pane key="3" title="操作记录" destroy-on-hide="true">
          <OperateLog :id="Number(route.params.id)" type="2" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup name="CarRepairDetail">
  import basicInfo from '../detail/components/basic-Info.vue'
  import feeInfo from '../detail/components/fee-info.vue'

  import { onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { repairDetail } from '@/api/asset/repair'

  const route = useRoute()
  const routeQuery = route.query
  const supplierType = ref(2) //(0 购置费 1保养 2维修 3年检 4违章)
  const activeType = ref('1')
  const status = ref()

  if (routeQuery.activeType) {
    activeType.value = routeQuery.activeType
  }

  const getDetail = (id) => {
    repairDetail({ id }).then((res) => {
      console.log('repairDetail', res.result)
      status.value = res.result.status
    })
  }

  onMounted(() => {
    getDetail(route.params.id)
  })

  // 默认选中某个 tab
  watch(
    () => routeQuery.activeType,
    (newVal) => {
      if (newVal) activeType.value = routeQuery.activeType
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped></style>
